<template>
	<view class="container">
		<view class="content">
			<view class="head-area">
				<view class="back" @click="back">←</view>
				<view class="name">BTC/USDT</view>
				<view class="rate" :class="{'rateDown': buyStatus==1}">+1.25</view>
			</view>
			<view class="price-info-area">
				<view class="form-area">
					<view class="title">
						<view class="title-bg bg-up" :class="buyStatus==0 ?'title-bg1' : 'grey-blue-F'" @click="buyStatus=0">买涨</view>
						<view class="title-bg" :class="buyStatus==1 ?'title-bg2' : 'grey-blue-F'" @click="buyStatus=1">买跌</view>
					</view>
					<view class="entrust">
						<view class="selector" @click="showList1 = !showList1">
							<view class="selector-bg">
								<view class="selector-item" v-show="showMethodIndex==index || showList1" v-for="(item,index) in methodsList" :key="index" @click="showMethodIndex=index">{{item}}</view>
							</view>
						</view>
						<view class="selector" @click="showList2 = !showList2">
							<view class="selector-bg">
								<view class="selector-item" v-show="showLeverageIndex==index || showList2" v-for="(item,index) in leverageList" :key="index" @click="showLeverageIndex=index">{{item}}</view>
							</view>
						</view>
					</view>
					<view class="price">
						<input class="fzyt_GBK" type="text" v-model="currencyPrice" />
						<view class="add">-</view>
						<view class="subtrac">+</view>
					</view>
					<view class="fz17 grey-blue-F fzyt_GBK width310">≈ 10.31232 USDT</view>
					<view class="buy-amount">
						<input class="fzyt_GBK" type="text" value="" placeholder="购买数量" placeholder-class="Segoe_UI grey-blue-F fz17 transformOrigin050" />
						<view class="fz17 grey-blue-F transformOrigin050">（张）</view>
					</view>
					<view class="fz17 grey-blue-F width310">可用 <text class="fzyt_GBK">7962 USDT</text></view>
					<view class="turnover"></view>
					<view class="fz17 grey-blue-F width310 mt-25">预期收入：<text class="fzyt_GBK">000 USDT</text></view>
					<button class="btn" :class="buyStatus==0?'btn-down':'btn-up'">{{buyStatus==0?'买涨':'买跌'}}</button>
				</view>
				<view class="chart-area">
					<view class="chart-head">
						<view class="">价格</view>
						<view class="" style="margin-right: 33rpx;">数量</view>
					</view>
					<view class="fallChart-box">
						<view class="list-item" v-for="(item,index) in fallList" :key="index">
							<view class="list-bg" :style="{'backgroundColor': 'rgba(201, 48, 44, 0.2)', 'width': `${item.width}%`}"></view>
							<view class="list-info">
								<view class="red-F">15617.67</view>
								<view class="grey-blue-F">0.1230</view>
							</view>
						</view>
					</view>
					<view class="price-info">
						<view class="red-F fz29">15619.96</view>
						<view class="grey-blue-F fz17 mt-15">≈ 10.31232 USDT</view>
					</view>
					<view class="riseChart-box">
						<view class="list-item" v-for="(item,index) in fallList" :key="index">
							<view class="list-bg" :style="{'backgroundColor': 'rgba(13, 212, 187, 0.2)', 'width': `${item.width}%`}"></view>
							<view class="list-info">
								<view class="green-F">15617.67</view>
								<view class="grey-blue-F">0.1230</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="category-head">
				<view class="category-head-item" :class="{'active': categorIndex==0}" @click="categorIndex=0">订单</view>
				<view class="category-head-item" :class="{'active': categorIndex==1}" @click="categorIndex=1">委托活动</view>
				<view class="category-head-item" :class="{'active': categorIndex==2}" @click="categorIndex=2">历史成交</view>
			</view>
			<view class="category-main">
				<view v-show="categorIndex==0">
					<view class="order-item" v-for="(item,index) in (buyStatus==0?upOrder:downOrder)" :key="index">
						<view class="order-info">
							<view class="order-head">
								<button class="order-btn" :class="buyStatus==0?'btn-down':'btn-up'">{{buyStatus==0?'涨':'跌'}}</button>
								<view class="order-info-text"><text class="currency">USDT/CNY</text> 全仓 <text class="multiple">X2</text></view>
								<button class="order-btn" @click="item.ping=true">平仓</button>
							</view>
							<view class="time">2021-06-23  12:23:24</view>
							<view class="table">
								<view class="column">
									<view class="t-head">价格</view>
									<view class="t-amount green-F">1000</view>
								</view>
								<view class="column">
									<view class="t-head">张数</view>
									<view class="t-amount">10</view>
								</view>
								<view class="column">
									<view class="t-head">未结算盈亏</view>
									<view class="t-amount">1.62949954</view>
								</view>
								<view class="column">
									<view class="t-head">已结算盈亏</view>
									<view class="t-amount">0.0210</view>
								</view>
								<view class="column">
									<view class="t-head">强平价格</view>
									<view class="t-amount">--</view>
								</view>
							</view>
						</view>
						<view class="close-position" v-show="item.ping">
							<view class="c-p-top">
								<button class="c-p-top-btn active" >止盈</button>
								<button class="c-p-top-btn" >止损</button>
								<button class="c-p-top-btn" >极速平仓</button>
							</view>
							<view class="input-box">
								<input type="text" value="" placeholder="输入价格" />
								<view class="unit">USDT</view>
							</view>
							<view class="input-box">
								<input type="text" value="" placeholder="输入张数" />
								<view class="unit">（张）</view>
							</view>
							<view class="fz17">预计盈亏 0.0012987 USDT</view>
							<button class="confrim-btn" @click="item.ping=false">确定</button>
						</view>
					</view>
				</view>
				<view v-show="categorIndex==1">
					<view class="entrust-item" v-for="(item,index) in entrust" :key="index">
						<view class="entrust-head">
							<button class="entrust-btn">涨</button>
							<view class="entrust-info-text"><text class="currency">USDT/CNY</text> 全仓 <text class="multiple">X2</text></view>
							<view class="backout"><image src="../../static/images/avatar.png" mode=""></image>撤销</view>
						</view>
						<view class="time">2021-06-23  12:23:24</view>
						<view class="table">
							<view class="column">
								<view class="t-head">委托价格</view>
								<view class="t-amount green-F">10.30 USDT</view>
							</view>
							<view class="column">
								<view class="t-head">张数</view>
								<view class="t-amount">10</view>
							</view>
							<view class="column">
								<view class="t-head">已成交量</view>
								<view class="t-amount">5/10</view>
							</view>
						</view>
					</view>
				</view>
				<view v-show="categorIndex==2">
					<view class="history-item" v-for="(item,index) in history" :key="index">
						<view class="history-head">
							<button class="history-btn">止盈</button>
							<view class="history-info-text"><text class="currency">BTC-USDT</text></view>
							<view class="lose-efficacy">已失效</view>
						</view>
						<view class="time">2021-06-23  12:23:24</view>
						<view class="table">
							<view class="column">
								<view class="t-head">委托价格</view>
								<view class="t-amount green-F">10.30 USDT</view>
							</view>
							<view class="column">
								<view class="t-head">触发价格</view>
								<view class="t-amount">1.5820</view>
							</view>
							<view class="column">
								<view class="t-head">委托数量</view>
								<view class="t-amount">10</view>
							</view>
							<view class="column">
								<view class="t-head">已结算盈亏</view>
								<view class="t-amount">0.12850</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<tabbar-diy :isIndex="1" :isInner="true"></tabbar-diy>
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				isIndex: 1,
				buyStatus: 0,//即将下单的状态，0-买涨，1-买跌
				amountLists: ['10$', '20$','30$','50$','100$','500$','1000$','2000$'],
				
				methodsList: ['全仓/逐仓','逐仓','全仓'],
				leverageList: ['杠杆 X2', '杠杆 X1', '杠杆 X3'],
				showList1: false,
				showList2: false,
				showMethodIndex: 0,
				showLeverageIndex: 0,
				currencyPrice: '156.00',
				fallList: [{width: 10}, {width: 60}, {width: 40}, {width: 80}, {width: 10}],
				categorIndex: 0,
				upOrder: [{ping: false, name: '1'},{ping: false, name: '2'},{ping: false, name: '3'},{ping: false, name: '4'},{ping: false, name: '5'},{ping: false, name: '6'}],
				downOrder: [{ping: false, name: '2'},{ping: false, name: '2'},{ping: false, name: '3'},{ping: false, name: '4'},{ping: false, name: '5'},{ping: false, name: '6'}],
				entrust: [33,2,3,4,5,6],//委托活动
				history: [44,2,3,4,5,6],//历史成交
			}
		},
		components:{
			tabbarDiy
		},
		onShow(){
		},
		onLoad(e) {
			_self = this;
			this.buyStatus = e.buyStatus;
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: 55rpx;
	}
	// .status_bar {
	// 	height: var(--status-bar-height);
	// 	width: 100%;
	// 	background-color: #202A33;
	// }
	.content{
		color: #FFFFFF;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: #071724;
		padding-top: 122rpx;;
	}
	.head-area{
		width: 100vw;
		height: 122rpx;
		display: flex;
		align-items: center;
		background-color: #202A33;
		padding-top: var(--status-bar-height);// 状态栏的高度
		box-sizing: border-box;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		
		.back{
			margin-left: 33rpx;
		}
		.name{
			font-size: 29rpx;
			margin:0 22rpx 0 33rpx;
		}
		.rate{
			width: 116rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #0DD4BB;
			background-color: rgba($color: #0DD4BB, $alpha: 0.4);
			border-radius: 8rpx;
			font-size: 30rpx;
			transform: scale(0.5);//为了字体，整体数值大2倍，然后缩小半
			transform-origin: 0% 50%;
		}
		.rateDown{
			color: #C9302C;
			background-color: rgba($color: #C9302C, $alpha: 0.4);
		}
	}
	.price-info-area{
		padding-top: 22rpx;
		display: flex;
		background-color: #202A33;
		
		.form-area{
			width: 50%;
			box-sizing: border-box;
			padding-right: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			
			// 买涨买跌
			.title{
				width: 310rpx;
				height: 65rpx;
				display: flex;
				margin-bottom: 47rpx;
			}
			.title-bg{
				width: 50%;
				height: 65rpx;
				text-align: center;
				line-height: 65rpx;
				font-size: 25rpx;
				background: url('../../static/images/buy-btn-bg.png');
				background-size: 100% 100%;
			}
			.bg-up{
				background: url('../../static/images/buy-btn-bg2.png');
				background-size: 100% 100%;
			}
			.title-bg1{
				background: url('../../static/images/buy-up-bg.png');
				background-size: 100% 100%;
			}
			.title-bg2{
				background: url('../../static/images/buy-down-bg.png');
				background-size: 100% 100%;
			}
			
			// 委托价
			.entrust{
				width: 310rpx;
				height: 56rpx;
				margin-bottom: 47rpx;
				display: flex;
				justify-content: space-between;
			}
			.selector{
				width: 135rpx;
				height: 56rpx;
				box-sizing: border-box;
				border: 2rpx solid #7592B4;
				border-radius: 8rpx;
				position: relative;
				letter-spacing: 2rpx;
			}
			.selector::after{
				content: '';
				display: inline-block;
				width: 0rpx;
				height: 0rpx;
				border-top: 8rpx solid #7592B4;
				border-left: 6rpx solid rgba(0,0,0,0);
				border-right: 6rpx solid rgba(0,0,0,0);
				border-bottom: 8rpx solid rgba(0,0,0,0);
				position: absolute;
				right: 12rpx;
				top: 24rpx;
				z-index: 4;
			}
			.selector-bg{
				padding-left: 6rpx;
				position: absolute;
				left: 4rpx;
				top: 0;
				background-color: #202A33;
				z-index: 3;
			}
			.selector-item{
				height: 52rpx;
				line-height: 52rpx;
				margin: 0;
				font-size: 24rpx;
				transform: scale(0.8);
				transform-origin: 0% 50%;
			}
			// 价格
			.price{
				width: 310rpx;
				height: 56rpx;
				box-sizing: border-box;
				border: 2rpx solid #7592B4;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				
				input{
					width: 148rpx;
					box-sizing: border-box;
					padding-left: 30rpx;
					height: 52rpx;
					line-height: 52rpx;
					font-size: 24rpx;
				}
			}
			.add, .subtrac{
				line-height: 52rpx;
				flex: 1;
				font-size: 24rpx;
				// transform: scale(0.7);
				// transform-origin: 0% 50%;
				border-left: 2rpx solid #7592B4;
				box-sizing: border-box;
				text-align: center;
			}
			.subtrac{
			}
			
			// 数量
			.buy-amount{
				width: 310rpx;
				height: 56rpx;
				box-sizing: border-box;
				border: 2rpx solid #7592B4;
				margin-top: 36rpx;
				margin-bottom: 24rpx;
				display: flex;
				align-items: center;
				
				input{
					padding-left: 22rpx;
					height: 52rpx;
					line-height: 52rpx;
					font-size: 24rpx;
				}
			}
			// 交易额
			.turnover{
				width: 310rpx;
				height: 33rpx;
				background: url(../../static/images/turnover-bg.png);
				background-size: 100% 100%;
				margin-top: 36rpx;
			}
			// 按钮
			.btn{
				width: 310rpx;
				height: 77rpx;
				line-height: 77rpx;
				border-radius: 8rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-right: 0;
				margin-top: 44rpx;
				margin-bottom: 50rpx;
			}
			
			.width310{
				width: 310rpx;
			}
		}
		.chart-area{
			width: 50%;
			box-sizing: border-box;
			padding-left: 20rpx;
			
			.chart-head{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				color: #7592B4;
				margin-bottom: 20rpx;
			}
			// 跌条形图
			.fallChart-box{
				height: 250rpx;
			}
			.list-item{
				position: relative;
				height: 50rpx;
				display: flex;
				justify-content: flex-end;
			}
			.list-bg{
				width: 0%;
				height: 50rpx;
			}
			.list-info{
				position: absolute;
				top: 0;
				left: 0;
				right: 33rpx;
				bottom: 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
			}
			// 价格信息
			.price-info{
				margin: 50rpx 0;
			}
			// 涨条形图
			.riseChart-box{
				height: 250rpx;
			}
		}
	}
	.category-head{
		height: 83rpx;
		background-color: #202A33;
		margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.category-head-item{
			color: #7592B4;
			margin: 0 32rpx;
			font-size: 25rpx;
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #202A33;
			
			&.active{
				color: #0DD4BB;
				border-bottom: 2rpx solid #0DD4BB;
			}
		}
	}
	.category-main{
		margin: 8rpx 0 14rpx;
		
		.order-item{
			margin-bottom: 8rpx;
			
			.order-info{
				height: 231rpx;
				padding: 30rpx 32rpx 40rpx 32rpx;
				box-sizing: border-box;
				background-color: #202A33;
			}
			.order-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;
			}
			.order-btn{
				width: 69rpx;
				height: 35rpx;
				padding: 0;
				margin: 0;
				line-height: 35rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				background-color: #0DD4BB;
				border-radius: 6rpx;
			}
			.order-info-text{
				flex: 1;
				margin-left: 17rpx;
				font-size: 24rpx;
				transform: scale(0.875);
				transform-origin: 0% 50%;
			}
			.currency{
				font-family: 'fzyt_GBK';
				margin-right: 15rpx;
			}
			.multiple{
				margin-left: 11rpx;
				font-size: 24rpx;
				transform: scale(0.8);
				transform-origin: 0% 50%;
			}
			
			// 平仓
			.close-position{
				height: 385rpx;
				margin: 8rpx 0;
				padding: 33rpx;
				box-sizing: border-box;
				background-color: #202A33;
			}
			.c-p-top{
				display: flex;
				margin-bottom: 44rpx;
			}
			.c-p-top-btn{
				width: 120rpx;
				height: 43rpx;
				line-height: 43rpx;
				padding: 0;
				margin: 0;
				margin-right: 65rpx;
				font-size: 24rpx;
				color: #ffffff;
				background-color: #7592B4;
			}
			.c-p-top-btn.active{
				background-color: #0DD4BB;
			}
			.input-box{
				width: 497rpx;
				height: 43rpx;
				padding: 0 35rpx 0 19rpx;
				border: 2rpx solid #0DD4BB;
				box-sizing: border-box;
				border-radius: 6rpx;
				margin: 35rpx 0 25rpx;
				display: flex;
				justify-content: space-between;
				
				input{
					font-size: 24rpx;
					transform: scale(0.72);
					transform-origin: 0% 50%;
				}
				.unit{
					font-size: 24rpx;
					transform: scale(0.72);
					transform-origin:100% 50%;
				}
			}
			
			.confrim-btn{
				width: 153rpx;
				height: 42rpx;
				line-height: 43rpx;
				padding: 0;
				margin-top: 14rpx;
				font-size: 24rpx;
				color: #ffffff;
				background-color: #0DD4BB;
			}
		}
		.entrust-item, .history-item{
			height: 231rpx;
			padding: 30rpx 32rpx 40rpx 32rpx;
			box-sizing: border-box;
			margin-bottom: 8rpx;
			background-color: #202A33;
		}
		.entrust-item{
			.entrust-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;
				
				image{
					width: 26rpx;
					height: 20rpx;
					margin-right: 16rpx;
				}
			}
			.entrust-btn{
				width: 69rpx;
				height: 35rpx;
				padding: 0;
				margin: 0;
				line-height: 35rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				background-color: #0DD4BB;
				border-radius: 6rpx;
			}
			.entrust-info-text{
				flex: 1;
				margin-left: 17rpx;
				font-size: 24rpx;
				transform: scale(0.875);
				transform-origin: 0% 50%;
			}
			.currency{
				font-family: 'fzyt_GBK';
				margin-right: 15rpx;
			}
			.multiple{
				margin-left: 11rpx;
				font-size: 24rpx;
				transform: scale(0.8);
				transform-origin: 0% 50%;
			}
			.backout{
				color: #0DD4BB;
				font-size: 24rpx;
				transform: scale(0.875);
				transform-origin: 100% 50%;
			}
		}
		.history-item{
			.history-head{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 14rpx;
				
				image{
					width: 26rpx;
					height: 20rpx;
					margin-right: 16rpx;
				}
			}
			.history-btn{
				width: 69rpx;
				height: 35rpx;
				padding: 0;
				margin: 0;
				line-height: 35rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				background-color: #0DD4BB;
				border-radius: 6rpx;
			}
			.history-info-text{
				flex: 1;
				margin-left: 17rpx;
				font-size: 24rpx;
				transform: scale(0.875);
				transform-origin: 0% 50%;
			}
			.currency{
				font-family: 'fzyt_GBK';
				margin-right: 15rpx;
			}
			.lose-efficacy{
				color: #0DD4BB;
				font-size: 24rpx;
				transform: scale(0.875);
				transform-origin: 100% 50%;
			}
		}
		
		// 选项卡共用样式
		.time{
			color: #7592B4;
			font-size: 24rpx;
			transform: scale(0.8);
			transform-origin: 0% 50%;
			margin-bottom: 20rpx;
		}
		.table{
			display: flex;
			justify-content: space-between;
		}
		.t-head{
			font-size: 24rpx;
			color: #7592B4;
			margin-bottom: 14rpx;
			text-align: center;
		}
		.t-amount{
			font-family: 'fzyt_GBK';
			font-size: 25rpx;
			text-align: center;
		}
	}
	
	// 共用样式
	.btn-up{
		background-color: #C9302C!important;
	}
	.btn-down{
		background-color: #0DD4BB!important;
	}
</style>
